<template>
    <div>
        <div id="app">
            <div class="header_con">
                <div class="header">
                    <div class="welcome fl">欢迎来到美多商城!</div>
                    <div class="fr">
                        <div  class="login_btn fl">
                            欢迎您：<em></em>
                            <span>|</span>
                            <a >退出</a>
                        </div>
                        <div class="login_btn fl">
                            <a href="login.html">登录</a>
                            <span>|</span>
                            <a href="register.html">注册</a>
                        </div>
                        <div class="user_link fl">
                            <span>|</span>
                            <a href="user_center_info.html">用户中心</a>
                            <span>|</span>
                            <a href="cart.html">我的购物车</a>
                            <span>|</span>
                            <a href="user_center_order.html">我的订单</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="search_bar clearfix">
                <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
                <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
                <form method="get" action="/search.html" class="search_con fr mt40">
                    <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                    <input type="submit" class="input_btn fr" name="" value="搜索">
                </form>
            </div>

            <div class="total_count">全部商品<em></em>件</div>
            <ul class="cart_list_th clearfix">
                <li class="col01">商品名称</li>
                <li class="col03">商品价格</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
                <li class="col06">操作</li>
            </ul>
            <ul class="cart_list_td clearfix" v-for="(sku,index) in cart_list" :key="index">
        
                <li class="col01"><input type="checkbox" name="" v-model="check_list" :value="sku.id" @click="multipleSelect(sku.id, sku.price, sku.goods_num)"></li>
                <li class="col02"><img :src="sku.img"></li>
                <li class="col03">{{ sku.name }}</li>
                <li class="col05">{{ sku.price }}元</li>
                <li class="col06">
                    <div class="num_add">
                        <a  class="add fl" @click="addNum(sku.id, sku.price)">+</a>
                        <input v-model="sku.goods_num"  type="text" class="num_show fl">
                        <a class="minus fl" @click="minusNum(sku.id, sku.price)">-</a>
                    </div>
                </li>
                <li class="col07">{{sku.price * sku.goods_num}}元</li>
                <li class="col08"><a @click="delCart(sku.id)">删除</a></li>
            </ul>

            <ul class="settlements">
                <li class="col01"><input type="checkbox" name=""  v-model="checked" @click="selectAll" ></li>
                <li class="col02">全选</li>
                <li class="col03">合计(不含运费)：<span>¥</span><em>{{total}}</em><br>共计<b>{{check_list.length}}</b>件商品</li>
                <li class="col04"><a  @click="account">去结算</a></li>
            </ul>

            <div class="footer">
                <div class="foot_link">
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系我们</a>
                    <span>|</span>
                    <a href="#">招聘人才</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                </div>
                <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
                <p>电话：010-****888    京ICP备*******8号</p>
            </div>
            </div>
            <!-- 
                点击加或者减的时候，会携带商品的id，这时进行判断 ，判断商品的id在不在check_list中，
                如果商品id在check_list中，进行购物车列表循环，循环时，判断加减的商品的id == 循环时所对应的商品的id的时，
                找这个商品的单价 进行累加或者累减
             -->
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            token: localStorage.getItem('token'),
            base_url: 'http://127.0.0.1:8000',
            cart_list: [],
            check_list: [],  // 复选列表
            total: 0,
            checked: false

        }
    },
    methods: {
        // 结算
        account() {
            // token, check_list
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('token', this.token)
            form_data.append('goods_list', this.check_list)
            form_data.append('total', this.total)
            // 发送数据
            axios({
                url: this.base_url + '/goods/create_order/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    this.$router.push({
                        name: 'OrderInfo',
                        query: {
                            'out_trade_no': res.data.out_trade_no
                        }
                    })
                }
            })
        },
        // 购物车减数量
        // 需要token, goods_id, 每次加几个？
        minusNum(goods_id, goods_price) {
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('token', this.token)
            form_data.append('goods_id', goods_id)
            // 数量默认减1
            // 发送数据
            axios({
                url: this.base_url + '/goods/minus_num/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    // 重新调用获取购物车信息的方法
                    this.acquireCart()
                    if(this.check_list.includes(goods_id)) {
                        // for(let i in this.cart_list) {
                        //     if(goods_id == this.cart_list[i].id) {
                        //         this.total -= this.cart_list[i].price
                        //         console.log(this.total)
                        //     }
                        // }
                        this.total -= goods_price
                    }
                    
                }
            })
        },
        // 购物车增加数量
        // 需要token, goods_id, 每次加几个？ 数量默认加1
        addNum(goods_id, goods_price) {
            // 实例化
            let form_data = new FormData()
            // 添加数据
            form_data.append('token', this.token)
            form_data.append('goods_id', goods_id)
            // 发送数据
            axios({
                url: this.base_url + '/goods/add_num/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    // 重新调用获取购物车信息的方法
                    this.acquireCart()
                    if(this.check_list.includes(goods_id)) {
                        // for(let i in this.cart_list) {
                        //     if(goods_id == this.cart_list[i].id) {
                        //         this.total += this.cart_list[i].price
                        //         console.log(this.total)
                        //     }
                        // }
                        this.total += goods_price
                    }
                    
                }
            })
        },
        // 删除购物车
        delCart(goods_id) {
            // 实例化
            let form_data = new FormData()
            //添加数据
            form_data.append('token', this.token)
            form_data.append('goods_id', goods_id)
            // 发送请求
            axios({
                url: this.base_url + '/goods/cart/',
                method: 'delete',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    // 重新调用获取购物车的方法
                    this.acquireCart()
                }
            })
        },
        // 金额计算
        sumTotal() {
            for(let i in this.cart_list) {
                console.log(i)
                this.total += this.cart_list[i].price * this.cart_list[i].goods_num
            }
            return this.total
        },
        // 全选
        selectAll() {
            
            if(this.checked) {
                this.check_list = []
                this.total = 0
            }else{
                this.check_list = []
                this.cart_list.forEach(item => {
                    this.check_list.push(item.id)
                });
                this.sumTotal()
                
            }
            console.log(this.check_list)
            console.log(this.total)
        },
        // 多选
        multipleSelect(sku_id, sku_num, sku_price) {
            // 选中某一个复选框时，把sku_id放入check_list，需要判断sku_id在不在check_list中
            if(this.check_list.includes(sku_id)) {
                // 条件成立，sku_id在check_list中，需要移除
                this.check_list.splice(this.check_list.indexOf(sku_id), 1)
                this.total -= sku_num * sku_price
            }else{
                this.check_list.push(sku_id)
                this.total += sku_price * sku_num
                

            }
            console.log(this.check_list)
            if(this.check_list.length == this.cart_list.length) {
                    this.checked = true
                    console.log(this.checked)
                }else{
                    this.checked = false
                }
        },
        // 获取购物车信息
        acquireCart() {
            axios({
                url: this.base_url + '/goods/cart/?token=' + this.token
            }).then(res => {
                console.log(res.data)
                this.cart_list = res.data.data
            })
        }
    },
    created() {
        console.log(this.token)
        if(!this.token) {
            this.$router.push({
                name: 'Login',
                query: {
                    'redirect': this.$route.fullPath
                }
            })
        }
        // 页面加载时调用获取购物车的方法
        this.acquireCart()
    }
}
</script>

<style scoped>

</style>
